/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-05-24 11:41:33
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-06-03 17:13:12
 */

// configureStore() 包裹createStore，并集成了redux-thunk、Redux DevTools Extension，默认开启
// createReducer() 创建一个reducer，action type 映射到 case reducer 函数中，不用写switch-case，并集成immer
// createAction() 创建一个action，传入动作类型字符串，返回动作函数
// createSlice() 创建一个slice，包含 createReducer、createAction的所有功能
// createAsyncThunk() 创建一个thunk，接受一个动作类型字符串和一个Promise的函数

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  selectCount,
} from "@/redux/rootReducer";
import http from "@/common/request";

export default function Counter(props) {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState("2");

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
      </div>
      <div>
        <input
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button
          onClick={() =>
            dispatch(incrementByAmount(Number(incrementAmount) || 0))
          }
        >
          Add Amount
        </button>
        <button
          onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
        >
          Add Async
        </button>
      </div>
    </div>
  );
}
